<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .aaa {
            width: 200px;

        }

        .bbb {
            position: fixed;
            left: 600px;
            top: 1px;
        }

        #ddd {
            margin: 0 auto;
            padding-left: 200px;
        }

        a {
            text-decoration: none;
        }

        button {
            width: 80px;
            height: 40px;
        }

        .ccc {
            width: 800px;

        }

        .not-arrow {
            padding: 5px 10px;
            border: 1px solid #dcd8d8;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .not-arrow::-ms-expand {
            display: none;
        }

        #qq {
            padding-left: 250px;
        }

    </style>
</head>
<body>


<div id="app">

    <div id="ddd">

    <el-form  id="updateForm" :model="employee"  ref="employee"  >

            <el-form-item label="员工头像" class="bbb" >
                <img  id="aaa" :src="employee.imgURL"  width="220px" height="220px"><br/>
                <input  id="bbb"  type="file"  @change="updateChangeImg()"  name="headImg">
            </el-form-item>

            <input v-model="employee.id" type="hidden" name="id">
            <el-form-item label="姓名"  prop="name" class="aaa">
                <el-input v-model="employee.name" name="name" ></el-input>
            </el-form-item>

            <el-form-item label="学历"  prop="education" class="aaa">
                <el-input v-model="employee.education" name="education" ></el-input>
            </el-form-item>

            <el-form-item label="手机号"  prop="telephone" class="aaa">
                <el-input v-model="employee.telephone" name="telephone" ></el-input>
            </el-form-item>
        <div hidden>
            <el-form-item label="年龄"  prop="age" class="aaa"  >
                <el-input v-model="employee.age" name="age"  oninput="value=value.replace(/[^\d]/g,'')" ></el-input>
            </el-form-item>

            <el-form-item label="地址"  prop="address" class="aaa" >
                <el-input v-model="employee.address" name="address" ></el-input>
            </el-form-item>
         </div>
            <el-form-item label="员工科室"  prop="kid">
                <select v-model="employee.kid" placeholder="请选择员工科室" name="kid" class="not-arrow"  >
                    <option  v-for="(k,i) in departmentArr "  :label="k.kname" :value="k.id"></option>
                </select>
            </el-form-item>

                <el-form-item label="社会职务"  prop="society"  class="ccc">
                    <el-input type="textarea"  v-model="employee.society" name="society" ></el-input>
                </el-form-item>

                <el-form-item label="专业特长"  prop="spe"  class="ccc">
                    <el-input type="textarea"  v-model="employee.spe" name="spe" ></el-input>
                </el-form-item>

                <el-form-item label="个人简介"  prop="profile"  class="ccc">
                    <el-input type="textarea"  v-model="employee.profile" name="profile" ></el-input>
                </el-form-item>

            <div id="qq">
                    <el-button><a  href="/ssm/staffcontrol/staffmain.html">返回</a></el-button>
                    <el-button type="primary" @click="updateEmployee()">确定</el-button>
            </div>

    </el-form>

    </div>
</div>



<script>


    $.get("/ssm/department/list",function (backData) {
        haha.departmentArr = backData.data;
    });

    var id = window.location.href.split("=")[1];

    $.get("/ssm/sta/getEmployee?id="+id ,function (backData) {
        if (backData.code == 1) {
            haha.employee = backData.data;
        }
    });


    var haha = new  Vue({
        el:"#app",
        data:{
            employee:{},
            departmentArr:[],
            msg:""
        },
        methods:{
            updateChangeImg(){
                var r = new FileReader();
                r.readAsDataURL(bbb.files[0]);
                r.onload = function() {
                    aaa.src = r.result;
                }
            },
            updateEmployee(){
                haha.$refs["employee"].validate((valid) => {
                    if (valid) {

                        var staData = new FormData(updateForm);

                        $.ajax({
                            url:"/ssm/sta/update",
                            type:"POST",
                            data:staData,
                            processData:false,
                            contentType:false,
                            success:function(backData){
                                haha.$message.success('修改成功');
                            }
                        });

                    }
                });
            }
        }
    });

</script>
</body>
</html>